<template>
  <ul class='list'>
    <li 
      class='item' 
      v-for='item of letters' 
      :key='item'
      :ref='item'
      @click='handelbuttonclick'
      @touchstart='handeltouchstart'
      @touchmove='handeltouchmove'
      @touchend='handeltouchend'
      >{{item}}</li>
  </ul>
</template>

<script>
export default {
  name:'alphabet',
  props:{
    city:Object
  },
  computed:{
    letters(){                     //用于保存对象键名的数组
      const letters=[]
      for(let i in this.city){     //for in遍历对象时，i为键名，取对象键值为this.city[i]
        letters.push(i)            //将city对象的键名A、B、C转化为数组
      }
      return letters
    }
  },
  data(){
    return{
      touchstatus:false,//标识位,开始为true，结束为false
      startY:0,
      timer:null//性能优化之函数节流
    }
  },
  updated(){
    //性能优化：页面刚加载时，cities为空对象。
    //当ajax获取数据之后，cities发生变化，alphabet被渲染出来
    //alphabet传入的数据变化时，该组件重新渲染，执行update钩子
    this.startY=this.$refs["A"][0].offsetTop//字母A距离顶部的高度
  },
  methods:{
    //点击字母，列表项滚动
    handelbuttonclick(e){
      this.$emit('change',e.target.innerText)//触发change函数，向父组件传递点击的字母
    },
    //字母表滑动监听事件 touchstart touchmove touchend
    handeltouchstart(){
      this.touchstatus=true
    },
    handeltouchmove(e){
      if(this.touchstatus){//点击是开始监测，鼠标移动执行touchmove，松开鼠标停止监控
        //函数节流：在一定时间内执行一次。
        //函数防抖：频繁触发的情况下，只有足够的空闲时间才执行一次。
        if(this.timer){
          clearTimeout(this.timer)//多次触发执行一次，控制在16ms内执行一次，如果频率高于16ms/次，则上次事件作废
        }
        this.timer=setTimeout(()=>{
          const touchY=e.touches[0].clientY-79//手指当前距离顶部的高度
          const index=Math.floor((touchY-this.startY)/20)//当前触摸位于第几个
          if(index>=0&&index<this.letters.length){//保证滑动的位置在列表高度范围内
            this.$emit('change',this.letters[index])//由父组件监听，触发列表移动
          }
        },16)
        }
    },
    handeltouchend(){
      this.touchstatus=false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list 
    display:flex 
    flex-direction:column
    justify-content:center//内容整体上下居中
    align-items:center//内容左右居中
    position:absolute 
    top:1.58rem 
    right:0 
    bottom:0
    width:.4rem
    .item 
      line-height:.4rem
      color:$bgcolor
</style>
